<!--公共开始-->
<include file="./public" />
<!--公共结束-->

<link rel="stylesheet" type="text/css" href="__ROOT__/js/jquery-ui/jquery-ui-1.10.1.custom.min.css"/>
<title>7min理财-用户中心</title>
<script type="text/javascript" src="__ROOT__/js/highcharts.js"></script>
<script type="text/javascript" src="__ROOT__/js/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="__ROOT__/js/jquery.layer.js"></script>
<script type="text/javascript" src="__ROOT__/js/jquery-ui-1.10.1.custom.js"></script>

<script type="text/javascript">
    var score={$score};
    var changescore={$score};
    var oldquestionscore = {$oldscore};
    var scale;
    var questionscore = oldquestionscore;
    var scoreratiolist;
    var arrPer = new Array();
    var arrRecommendPer = new Array();
    var arrProductList = new Array();

    $(document).ready(function() 
    {
        getRecommendPer();
        
        $.ajax({  
                    type: "post",  
                    url: "__URL__/getratio20",  
                    dataType: 'json',
                    data: {},
                    beforeSend: function(XMLHttpRequest){   
                    },  
                    async:false, 
                    error:function(){
                        alert('error');
                    },
                    success: function(json)
                    {
                        scoreratiolist = json.data;
                        $.each(scoreratiolist, function (n, value) {  
                             if(parseFloat(oldquestionscore) <= parseFloat(value.scoremin)){
                                scale =  parseFloat(value.scale);
                                resetValue();
                                return false;
                             }  
                         });
                    } 
                })
        
        
        
        $("#btnSaveScore").click(function(){
            var isLogin = checkLogin();
            
            if(isLogin ==0) //未登录
            {
                //把得分存入session['testScore'],跳转到注册页
                $.ajax({  
                    type: "post",  
                    url: "__URL__/saveQuestionScoreSession",  
                    dataType: 'json',
                    data: {questionscore:questionscore},
                    beforeSend: function(XMLHttpRequest){   
                    },  
                    async:false, 
                    error:function(){
                        alert('error');
                    },
                    success: function(json)
                    {
                        self.location='__APP__/Uc/User/reg/'; 
                    } 
                })
            }else //已登录
            {
                //ajax保存得分，提示用户保存成功
                saveScore();
            }
        })
		$("#slider-range-min-amount").text(scale);
		$("#slider-range-min").slider({
			range: "min",
			value: scale,
			min: 0,
			max: 20,
			slide: function (event, ui) {
				$("#slider-range-min-amount").text(ui.value);
			},
			change: function (event, ui) {
                $.each(scoreratiolist, function (n, value) {  
                    if(value.scale == ui.value){
                         $("#spantype").text(value.type);
                         var arrRecommendPer2 = new Array();
                         arrRecommendPer2['xianjin'] = parseFloat(value.cashper)*100;
                         arrRecommendPer2['zhaiquan'] = parseFloat(value.bondper)*100;
                         arrRecommendPer2['gupiao'] = parseFloat(value.stockper)*100;
                         arrRecommendPer2['linglei'] = parseFloat(value.otherper)*100;
                         questionscore = parseFloat(value.scoremin);
                         showchart(arrRecommendPer2['xianjin'],arrRecommendPer2['zhaiquan'],arrRecommendPer2['gupiao'],arrRecommendPer2['linglei']); 
                         getGroupHisdata(arrRecommendPer2['xianjin'],arrRecommendPer2['zhaiquan'],arrRecommendPer2['gupiao'],arrRecommendPer2['linglei'],'type');
                         showProductList(arrRecommendPer2);
                         
                     } 
                 });
				
			}
		});

    });
	
	//重置slider
	function resetValue(){
		$("#slider-range-min").slider({
			value: scale			
		});
		$("#slider-range-min-amount").text(scale);
		questionscore = oldquestionscore;
        showchart(arrRecommendPer['xianjin'],arrRecommendPer['zhaiquan'],arrRecommendPer['gupiao'],arrRecommendPer['linglei']);
        getGroupHisdata(arrRecommendPer['xianjin'],arrRecommendPer['zhaiquan'],arrRecommendPer['gupiao'],arrRecommendPer['linglei'],'type');
        showProductList(arrRecommendPer);
	}
	
    //判断是否登录，返回uid或0
    function checkLogin()
    {
        var result = 0;
        $(function() 
        {
           $.ajax({  
                    type: "post",  
                    url: "__GROUP__/Index/checkLogin",  
                    dataType: 'json',
                    data: {},
                    beforeSend: function(XMLHttpRequest){   
                    },  
                    async:false, 
                    error:function(){
                        alert('error');
                    },
                    success: function(json)
                    {
                        result = json;
                    } 
                })
        });
        return result;
    }
    
    //保存得分
    function saveScore()
    {
       $.ajax({  
                type: "post",  
                url: "__URL__/savescore",  
                dataType: 'json',
                data: {'score':questionscore},
                beforeSend: function(XMLHttpRequest){   
                },  
                error:function(){
                    //alert('error');
                },
                success: function(json)
                {
                    //alert('success!');
                    if(json.status == 1){
                       alert(json.info);
                        //window.location.href='testResult/'+json.data['type'] +'/' +json.data['score'] ;
                    } else
                    {
                        alert('wrong1!');
                    }
                } 
                
            })    
    }
    
    function getRecommend(v)
    {

       $.ajax({  
                type: "post",  
                url: "__URL__/getRecommend",  
                dataType: 'json',
                data: {score:v},
                beforeSend: function(XMLHttpRequest){   
                },  
                error:function(){
                   // alert('getRecommend error');
                    //alert(v);
                },
                async :true,
                success: function(json)
                {
                    //alert('success!');
                    if(json.status == 1){
                        arrProductList = json.data;
                        showProductList(arrRecommendPer);
                    } else
                    {
                        alert('wrong2!');
                    }
                } 
            })
    }
    
        function getRecommendPer(){
        $.ajax({  
                    type: "post",  
                    url: "__URL__/getRecommendPer",  
                    dataType: 'json',
                    data: {'score':score},
                    beforeSend: function(XMLHttpRequest){   
                    },  
                    error:function(){
                        //alert('error Per');
                    },
                    async :true,
                    success: function(json)
                    {
                        if(json.status == 1){
                          arrRecommendPer['xianjin'] = parseFloat(json.data['xianjin']['percent']);
                          arrRecommendPer['zhaiquan'] = parseFloat(json.data['zhaiquan']['percent']);
                          arrRecommendPer['gupiao'] = parseFloat(json.data['gupiao']['percent']);
                          arrRecommendPer['linglei'] = parseFloat(json.data['linglei']['percent']);
                           showchart(arrRecommendPer['xianjin'],arrRecommendPer['zhaiquan'],arrRecommendPer['gupiao'],arrRecommendPer['linglei']);
                          getRecommend(score);
                          getGroupHisdata(arrRecommendPer['xianjin'],arrRecommendPer['zhaiquan'],arrRecommendPer['gupiao'],arrRecommendPer['linglei'],'type');
                        } else
                        {
                            alert('wrong3!');
                        }
                    } 
                })
        
    }
    
    

function showProductList(arrRecommendPer) 
{
    //生成底部推荐产品列表html,读取变局数组arrProductList和百分比全局数组arrPer
    $("#productlist").html("");//清除列表
    var str = "";
    
    $.each(arrProductList, function(i, val) {
        if(arrRecommendPer[i] != 0)
        {
         str += "<tr>\r\n";
         str += "   <td>"+ val['name'] +"</td>\r\n";
         str += "   <td></td>\r\n";
 
         str += "   <td><span class='percentage-label'>"+ arrRecommendPer[i].toFixed(2) +"%</span><span class='percentage-bar-container'><span class='percentage-bar' style='width:"+ arrRecommendPer[i] +"%;'></span></span></td>\r\n";
         str += "   <td></td>\r\n";
         str += " </tr>\r\n";
                 
            if (val['product'] == null) {
                v2 = 'nothing';
            }else{
                var proCount = val['product'].length;//产品个数，用于占比的均分 
                var str2 = "";
               $.each(val['product'], function(j, val2) { 
                        var per=arrRecommendPer[i]/proCount;                   
                         str2 += " <tr class='sub_tr'>\r\n";
                         str2 += "   <td class='sub'></td>\r\n";
                         str2 += "   <td class='sub'>" + val2['chinameabbr'] + "</td>\r\n";
                         str2 += "   <td>"+ per.toFixed(2) +"%</td>\r\n";
                         str2 += "   <td class='sub'>" + val2['comment'] + "</td>\r\n";
                         str2 += " </tr>\r\n";                         
                })
            str += str2;
            }
        }
        
    });
    $("#productlist").append(str); 
}

     
function showchart(cashValue,bondValue,stockValue,otherValue) {
     var totalValue=cashValue+bondValue+stockValue+otherValue;
     var restValue=totalValue-cashValue-bondValue-stockValue-otherValue;
     var cashPer=Math.round(cashValue/totalValue*100);
     var bondPer=Math.round(bondValue/totalValue*100);
     var stockPer=Math.round(stockValue/totalValue*100);
     var otherPer=Math.round(100-cashPer-bondPer-stockPer);
     var restPer=Math.round(restValue/totalValue*100);
     var speed=100;  
    
    var chart;  
    charts(cashValue,bondValue,stockValue,otherValue);

}


//饼状图和曲线图
function charts(a,b,c,d){
         //饼状图
         $('#dqbl').highcharts({
            chart: {
            },
            title: {
                text: '建议投资比例',
                style: { "color": "#999", "fontSize": "16px" ,"fontFamily":"微软雅黑"}      
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                            format: '{point.name}: {point.percentage:.2f}%',
                            distance: 5
                    },
                    showInLegend: true,
                    innerSize: '40%'
                },
            },
            legend: {
                        enabled:false,
                        layout: 'horizontal',
                        align: 'center',
                        borderWidth: 0,
                        itemWidth: 190,
                        itemMarginTop: 3,
                        width:380,
                        itemStyle : { 'fontWeight' : 'normal' },
                        floating: false,                
                        labelFormatter: function() {
                            //return this.name + "：￥"+Highcharts.numberFormat(this.y)+"["+Highcharts.numberFormat(this.percentage)+"%11]";
                        }
                    },
            series: [{
                type: 'pie',
                name: '占投资比例',
                data: [
                    {name: '现金', y:a,color: '#ff6c60' },
                    {name: '债券', y:b,color:'#fcb322' },
                    {name: '股票', y:c,color: '#a9d86e' },
                    {name: '另类投资', y:d,color:'#58c9f3'}
                ]
            }]
        })
}

 function getGroupHisdata(xj,zj,gp,ll,type){
     //alert(xj+"|"+zj+"|"+gp+"|"+ll+"|"+type);
    $.ajax({  
            type: "post",  
            url: "__URL__/getGroupHisdata",  
            dataType: 'json',
            data: {'xianjin':xj,'zhaijuan':zj,'gupiao':gp,'linglei':ll},
            beforeSend: function(XMLHttpRequest){   
            },  
            error:function(){
               // alert('error');
            },
            async : false,
            success: function(json)
            {
                if(json.status == 1){
                    var data = eval("("+json.data+")");
                    $("#tdpjsy").text(data['syl']+"%");
                    $("#tdfx").text(data['syqj']/*+"%"*/);
                } else
                {
                    alert('wrong!');
                }
            } 
        })
}
</script>
</head>
<body>


<!--头部+顶部开始-->
<include file="./top" />
<!--头部+顶部结束-->

<!--主体开始-->
<div class="main-content">
    <div class="wrapper">
        <div class="panel score_result">
            <div class="panel-head">
                根据您的回答，您属于<span class="label label-primary " id="spantype">{$typename}</span> 客户，您的方案如下：
                    
           </div>
            <div class="panel-body">
                <!--投资组合结果-->
                <div class="">
                    <div class="score_pie left" style="width:50%;">
                         <!--饼状图-->
                        <div id="dqbl" style="height:400px;width:100%;text-align:center;">
                            <img src="__ROOT__/images/loadingPie.gif" style="margin-top:100px;" />
                        </div>
                    </div>
                    <!--<div class="pie_button left">
                        <a href="javascript:void(0)" class="btn btn-primary btn-block" id="btnAdjust"><i class="fa fa-sliders"></i>调　整</a>
                        <p>想要更高的平均收益？想获得更低的风险？您可以自己调整投资比例，开始动手吧！<span></span></p>
                        <a class="btn btn-success btn-block" id="spanSaveScore"><i class="fa fa-sign-in"></i>放个人页面</a>
                    </div>-->
                    <div class="score_graph left">
                        <!--曲线图-->
                        <!--<div id="resent5"  style="height:400px;text-align:center;">
                            <img src="__ROOT__/images/loadingPie.gif" style="margin-top:100px;" />
                        </div>-->
                        <!--调整层-->
                        <div id="layerAdjust">
                            <h1>调整投资比例</h1>
                            <!--百分比条-->
                            <div class="sliders left" style="width:80%;">
                              <!--现金-->
                              <div class="slider_one">
                                  <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderCash" aria-disabled="false">
                                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                                    <a class="ui-slider-handle ui-state-default ui-corner-all"></a>
                                  </div>
                                  <div class="slider-info" >
                                      现金占比:
                                      <span class="slider-info" id="sliderCashAmount"></span>
                                  </div>
                               </div>
                              <!--债券-->
                               <div class="slider_one">
                                  <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderBond" aria-disabled="false">
                                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                                    <a class="ui-slider-handle ui-state-default ui-corner-all"></a>
                                  </div>
                                  <div class="slider-info">
                                      债券占比:
                                      <span class="slider-info" id="sliderBondAmount"></span>
                                  </div>
                               </div>
                               <!--股票-->
                              <div class="slider_one">
                                  <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderStock" aria-disabled="false">
                                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                                    <a class="ui-slider-handle ui-state-default ui-corner-all"></a>
                                  </div>
                                  <div class="slider-info">
                                      股票占比:
                                      <span class="slider-info" id="sliderStockAmount"></span>
                                  </div>
                               </div>
                              <!--另类投资-->
                               <div class="slider_one">
                                  <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderOther" aria-disabled="false">
                                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                                    <a class="ui-slider-handle ui-state-default ui-corner-all"></a>
                                  </div>
                                  <div class="slider-info">
                                      另类投资占比:
                                      <span class="slider-info" id="sliderOtherAmount"></span>
                                  </div>
                               </div>
                               <!--剩余-->
                               <div class="slider_one">
                                  <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sliderRest" aria-disabled="false">
                                    <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                                    <a class="ui-slider-handle ui-state-default ui-corner-all"></a>
                                  </div>
                                  <div class="slider-info">
                                      剩余占比:
                                      <span class="slider-info" id="sliderRestAmount"></span>
                                  </div>
                               </div>
                            </div>
                            <!--加减控制-->
                            <div class="spinners right" style="width:20%;">
                                <!--现金-->
                                <div class="btn-group">
                                    <span id="minusCash" class="btn btn-success btn-sm"><i class="fa fa-minus"></i></span>
                                    <span id="plusCash" class="btn btn-default btn-sm"><i class="fa fa-plus"></i></span>
                                </div>
                                <div class="clear"></div>
                                <!--债券-->
                                <div class="btn-group">
                                    <span id="minusBond" class="btn btn-success btn-sm"><i class="fa fa-minus"></i></span>
                                    <span id="plusBond" class="btn btn-default btn-sm"><i class="fa fa-plus"></i></span>
                                </div>
                                <div class="clear"></div>
                                <!--股票-->
                                <div class="btn-group">
                                    <span id="minusStock" class="btn btn-success btn-sm"><i class="fa fa-minus"></i></span>
                                    <span id="plusStock" class="btn btn-default btn-sm"><i class="fa fa-plus"></i></span>
                                </div>
                                <div class="clear"></div>
                                <!--另类投资-->
                                <div class="btn-group">
                                    <span id="minusOther" class="btn btn-success btn-sm"><i class="fa fa-minus"></i></span>
                                    <span id="plusOther" class="btn btn-default btn-sm"><i class="fa fa-plus"></i></span>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="blank10"></div>
                            <div class="right">
                                <span class="btn btn-success" id="adjust"><i class="fa fa-check"></i>确定</span>
                                <span class="btn btn-primary" id="cancel"><i class="fa fa-times"></i>取消</span>
                            </div>
                        </div>
                        <h2>在当前资产配置比例下，根据过去5年的历史金融数据计算结果，您的资产95%的概率收益为：</h2>
						<table class="table" style="width:100%;margin:auto;font-size:16px;">
                          <tr>
                            <th width="50%">一年平均收益：</th>
                            <td id="tdpjsy"></td>                            
                          </tr>
                          <tr>
                            <th width="50%">一年收益区间：</th>
                            <td id='tdfx'></td>
                          </tr>
                        </table>
                        <div class="score_info">
                        	<p>从5年投资期限来看，95%的概率您的收益会落在此区间。短期投资收益可能明显高于或低于此范围。</p>
                        </div>
                        <div class="blank10"></div>
                        <!--调整slider-->
                        <div class="sliders">
                              <div id="slider-range-min" class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                                <div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
                                <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" id=""></a>
                              </div>
                              <div class="slider-info">
                                 
                                  <span class="slider-info" id="slider-range-min-amount" style="display:none"></span>
                                <a href="javascript:void(0)" class="btn btn-info btn-sm right" id="slider-range-reset" onClick="resetValue()">重置</a>
                              </div> 
                        </div>
                      <div class="score_tools">
                        	<a id="btnSaveScore" href="Javascript: void(0)" class="btn btn-danger">保存测试结果</a>
                            <a href="#" class="btn btn-info" data-reveal-id="riskTest">想要更高收益</a>
                        </div>
                        <div class="right">
                            
                           
                        </div>
                        
                    </div>

                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!--产品列表开始-->
        <div class="panel">
            <div class="panel-head">
                根据您的配置，我们推荐以下产品：
            </div>
            <!--推荐产品列表-->
            <div class="panel-body score_table">
                <table class="table">
                  <thead>
                      <tr>
                        <th width="10%">资产类别</th>
                        <th width="25%">推荐产品列表</th>
                        <th width="30%">推荐比例</th>
                        <th >推荐理由</th>
                      </tr>
                  </thead>
                  <tbody id="productlist">
                    
                  </tbody>
                </table>
                <div class="blank10"></div>
                <div class="right">

                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!--产品列表结束-->
    </div>
</div>
<!--主体结束-->
<!--底部开始-->
<include file="./foot" />
<!--底部结束-->
<!--答题弹出层开始-->
<include file="./question" />
<!--答题弹出层结束-->

</body>
</html>
